<template>
<div>
    <el-select v-model="value" placeholder="请选择" style="width:100px;" @change="currentSel">
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    >
    </el-option>
    </el-select>
    <el-input
    prefix-icon="el-icon-search"
    placeholder="请输入内容"
    style="width: 200px"
    v-model="input"
    clearable
    >
    </el-input>

    <el-button
    type="success"
    icon="el-icon-search"
    style="width:80px;margin-left:10px"
    @click="selectBy()"
    >搜索</el-button
    >
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column
        prop="id"
        label="订单ID"
        align="center"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        align="center"
        width="150"
    >
    </el-table-column>
    <el-table-column
        prop="tel"
        label="手机号"
        align="center"
        width="200"
    >
    </el-table-column>
     <el-table-column
        prop="commodName"
        label="商品名"
        align="center"
        width="150"
    >
    </el-table-column>
    <el-table-column
        prop="address"
        label="收货地址"
        align="center"
        width="250"
    >
    </el-table-column>

    <el-table-column
        prop="start"
        label="状态"
        align="center"
        width="120"
    >
    </el-table-column>
    <el-table-column align="center" label="操作" style="width:200px;">
        <template slot-scope="scope">
        <el-button
        size="mini"
        type="info"
        icon="el-icon-search"
        style="width:80px;"
        @click.prevent="selectByShow(scope.$index,scope.row)"
        >详情</el-button
        >
        <el-button
        size="mini"
        type="warning"
        icon="el-icon-edit"
        style="width:80px;"
        @click.prevent="updateByShow(scope.$index,scope.row)"
        >修改</el-button
        >
        </template>
    </el-table-column>
    </el-table>
        <!-- 查看弹框 -->
        <el-dialog
        :title="selectById"
        :visible.sync="dialogVisible"
        width="40%"
        >
        <el-form
            :model="ruleForm"
            ref="refRuleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="订单编号：" prop="id" style="width:200px;">
            <el-input v-model="ruleForm.id" readonly></el-input>
            </el-form-item>
            <el-form-item label="送货地址：" prop="address" style="width:450px">
            <el-input v-model="ruleForm.address" readonly></el-input>
            </el-form-item>
            <el-form-item label="联系人：" prop="name" style="width:200px">
            <el-input v-model="ruleForm.name" readonly></el-input>
            </el-form-item>
            <el-form-item label="电话号码：" prop="tel" style="width:350px">
            <el-input v-model="ruleForm.tel" readonly></el-input>
            </el-form-item>
            <el-form-item label="商家：" prop="sj" style="width:300px">
            <el-input v-model="ruleForm.busin" readonly></el-input>
            </el-form-item>
            <el-form-item label="交易时间：" prop="time" style="width:250px">
            <el-input v-model="ruleForm.time" readonly></el-input>
            </el-form-item>
            <el-form-item label="订单总金额：" prop="price" style="width:200px">
            <el-input v-model="ruleForm.price" readonly></el-input>
            </el-form-item>
            <el-form-item label="订单状态：" prop="start" style="width:200px">
            <el-input v-model="ruleForm.start" readonly></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 修改弹框 -->
        <el-dialog
        :title="updateById"
        :visible.sync="updateVisible"
        width="40%"
        >
        <el-form
            :model="updateData"
            ref="updateDate"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="商品名：" style="width:200px;">
            <el-input v-model="updateData.commodName" readonly></el-input>
            </el-form-item>
            <el-form-item label="商品数量：" style="width:200px">
            <el-input v-model="updateData.number" readonly></el-input>
            </el-form-item>
            <el-form-item label="收货地址" style="width:200px">
            <el-input v-model="updateData.address"></el-input>
            </el-form-item>
            <el-form-item label="手机号" style="width:400px">
            <el-input v-model="updateData.tel"></el-input>
            </el-form-item>
            <el-form-item label="姓名：" style="width:300px">
            <el-input v-model="updateData.name"></el-input>
            </el-form-item>

            <el-form-item label="状态：" style="width:250px">
            <el-select v-model="updateData.start" placeholder="请选择" style="width:100px;" @change="currentSelUpdate">
            <el-option
                v-for="item in optionsStart"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
            </el-select>
            </el-form-item>
            
            
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateVisible = false">取 消</el-button>
            <el-button type="primary" @click="update()">修 改</el-button>
        </span>
        </el-dialog>
        <!-- 分页 -->
        <div class="block" style="margin-top:20px;">
            <!-- size-change 每页条数，改变时会触发	
            current-change 当前页，改变时会触发	
            current-page 当前页数 
            page-sizes 每页显示个数选择器的选项设置
            page-size 每页显示条目个数
            layout	组件布局
            total	总条目数-->
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.pageNo"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="this.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.total"
            >
            </el-pagination>
        </div>
</div>
</template>

<script>
var isBy;
var isStart;
import {getCommodityOrderList} from '@/services/CommodityOrder.js'
import {getById} from '@/services/CommodityOrder.js'
import {updateBy} from '@/services/CommodityOrder.js'
import {updateById} from '@/services/CommodityOrder.js'
export default {
data() {
    return {
    pageNo: 1,
    pageSize: 2,
    total: 4,
    tableData: [
        {
        id: "",
        name: "",
        commodName: "",
        tel: "",
        address:"",
        start: "",
        num:"",
        },
    ],
    input: "",
    optionsStart:[
        {value:"已下单",label:"已下单"},
        {value:"已发货",label:"已发货"},
        {value:"已收货",label:"已收货"},
        {value:"已完成",label:"已完成"},
    ],
    options: [
        {
        value: "name",
        label: "姓名",
        },
        {
        value: "commodName",
        label: "商品名",
        },
        {
        value: "start",
        label: "状态",
        },
    ],
    value: "",
    dialogVisible: false,updateVisible: false,
    selectById: "查看商品订单详情",
    updateById: "修改商品订单信息",
    ruleForm: {
    id: "",
    name: "",
    address: "",
    tel: "",
    busin: "",
    time: "",
    price: "",
    start: "",
    readonly: true
    },
    // 验证规则
    // rules: {
    // roleName: [
    //     { required: true, message: "请输入角色名称", trigger: "blur" },
    //     { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
    // ],
    // roleDesc: [{ required: true, message: "角色描述", trigger: "blur" }]
    // }
    updateData: {
        id:"",
        commodName:"",
        number:"",
        address:"",
        tel:"",
        name:"",
        start:""
    },
    };
},
async created(){
    var a=await getCommodityOrderList(null,null,this.pageNo,this.pageSize);
    this.tableData=a.list;
    this.tabList();
},
methods: {
    async updateByShow(index,row){
        var a=await updateById((index+1));
        this.updateData=a.list[0];
        this.updateVisible=true;
    },
    async selectBy(){
        var a=await getCommodityOrderList(isBy,this.input,this.pageNo,this.pageSize);
        this.tableData=a.list;
    },
    currentSel(selVal){
        isBy=selVal;
    },
    currentSelUpdate(selVal){
        isStart=selVal;
    },
    async selectByShow(index,row){
        var Byid=await getById((index+1));
        this.ruleForm=Byid;
        this.dialogVisible = true;
    },
    async update(){
        var isUpdate=await updateBy(this.updateData);
        if(isUpdate){
            this.$message.success("修改成功！");



            location.reload();
            this.updateVisible=false;
        }else{
            this.$message.error("修改失败！");
        }
    },
    //  分页
    async tabList() {
        var resp = await getCommodityOrderList(isBy,this.input,this.pageNo,this.pageSize);
        this.tableData = resp.list;
        this.total = resp.total;
        },
        async handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        var resp = await getCommodityOrderList(isBy,this.input, this.pageNo, this.pageSize);
        this.tableData = resp.list;
        this.total = resp.total;
        },
        async handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNo = val;
        var resp = await getCommodityOrderList(isBy,this.input, this.pageNo, this.pageSize);
        this.tableData = resp.list;
        this.total = resp.total;
    },
},
computed: {
    
}
};
</script>
<style scoped>
</style>
